<template>
  <div class="app-container">
    <el-alert
      style="margin-bottom: 10px"
      title="全选:删除,添加分类,暂未研发"
      type="info"
    />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章列表</span>
        <!--        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
      </div>
      <el-table
        :data="list.filter(data => !search || data.Title.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          label="图片"
        >
          <template slot-scope="scope">
            <img :src="scope.row.img" alt="" width="100px">
          </template>
        </el-table-column>
        <el-table-column
          label="标题"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="关联标签"
          width="180">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.tag" :key="item.id">{{ item.title }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          min-width="150px"
        >
          <template slot="header">
            <el-input
              v-model="search"
              placeholder="输入关键字搜索"
              size="mini"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>

// import { getArticleList, delArticle } from '@/api/article'
import { getArticleList, delArticle } from './api/api'

export default {
  data() {
    return {
      list: [],
      search: ''
    }
  },
  created() {
    console.log(this.$router)
    this.getArticle()
  },
  methods: {
    // 显示文章列表
    getArticle() {
      getArticleList().then(x => {
        console.log(x)
        this.list = x.data
      })
      // getArticleList().then(con => {
      //   console.log(con)
      //   this.list = con.data
      // })
    },
    // 修改文章
    handleEdit(index, row) {
      this.$router.push({ path: '/booksEdit', query: row })
      console.log(index, row)
    },
    // 删除文章
    handleDelete(index, row) {
      console.log(index, row)
      delArticle({ id: row.id }).then(x => {
        if (x.code == 20000) {
          this.getArticle()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
